<template>
  <div class="home">
    <div class="home__body">
      <router-view />
    </div>
    <div class="home__footer">
      <van-tabbar route>
        <van-tabbar-item replace to="/films" icon="video-o">
          电影
        </van-tabbar-item>
        <van-tabbar-item replace to="/cinemas" icon="tv-o">
          影院
        </van-tabbar-item>
        <van-tabbar-item replace to="/active" icon="notes-o">
          资讯
        </van-tabbar-item>
        <van-tabbar-item replace to="/center" icon="user-circle-o">
          我的
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default { name: "home" };
</script>
<script setup>
import { ref } from "vue";
const active = ref(1);
</script>

<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  &__body {
    flex: 1;
    overflow: hidden;
  }

  &__footer {
    height: 50px;
  }
}

.van-tabbar-item--active {
  color: #ff5f16;
}
</style>
